<template>
<div class="list">
  <BaseList ref="list"  :option="listOption" @load="loadData" >
    <div  class="item" slot-scope="props" slot="item">
      <div class="menu-item" @click="()=>{$router.push(d.route)}" v-for="(d,idx) in props.data" :key="idx">
        {{d.name}}
      </div>
    </div>
  </BaseList>
  </div>
</template>

<script>
import BaseList from '@/components/common/Baselist'
export default {
  components: { BaseList },
  data() {
    return {
      pageIndex: 0,
      pageSize: 20,
      data: [],
      listOption: {
        needRefresh: true
      }
    }
  },
  methods: {
    loadData(type) {
      const data = []
      data.push([
        { name: '版本管理', route: 'versions' }
      ])
      if (type == 0) {
        this.pageIndex = 0
        this.data = []
      } else {
        this.pageIndex++
      }
      this.data = this.data.concat(data)
      this.$refs.list.onDataChange(this.data, true)
    }
  }
}
</script>

<style scoped>
.list {
  display: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.item {
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}
.menu-item {
  flex: 1;
  border-width: 1px;
  border-style: solid;
  border-color: #dec3c35e;
  margin: 10px;
  display: flex;
  color: #21b2df;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}
</style>
